<template>
  <div class="item">
    <div class="user">
      <avatar :imgUrl="content.head_pic" @click.native="avatarClick"/>
      <div class="username">{{content.nickname}}</div>
    </div>
    <div class="comment" @click="contentClick">{{content.content}}</div>
  </div>
</template>
<script>
import Avatar from 'common/avatar/Avatar'
import { animateCSS } from 'common/animate.js'
export default {
  name: 'CommentItem',
  props: {
    content: Object,
    id: [String, Number]
  },
  components: {
    Avatar
  },
  data () {
    return {
      timer: null
    }
  },
  methods: {
    avatarClick (e) {
      animateCSS(e.target, 'bounceIn')
    },
    contentClick (e) {
      animateCSS(e.target, 'pulse')
    }
  }
}
</script>
<style lang="stylus" scoped>
  .item
    box-sizing: border-box
    width: 100%
    display: flex
    padding: .1rem
    align-items: center
    .user
      display:flex
      flex-direction: column
      justify-content center
      align-items: center
      width:.7rem
      height: .7rem
      .username
        padding-top: .04rem
        font-size: .16rem
    .comment
      width: 100%
      box-sizing: border-box
      padding: .15rem .2rem
      font-size: .2rem
      line-height: .3rem
      background: #F8F1F0
      border-radius: .5rem
      overflow-x: hidden
      text-overflow: ellipsis
</style>
